<template>
  <div style="display: flex;align-items: center;flex-direction: column;width: 100%;height: 100%">
    <div class="theme-one">
      <div class="head-title"><span>结构基本信息</span></div>
      <div class="info-display">
        <el-row :justify="'space-between'">
          <el-col :span="8">
            <div class="info-block">
              <span class="title">结构编号</span>
              <span class="context">{{ curPrimInfo?.serialNum }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-block">
              <span class="title">结构名称</span>
              <span class="context">{{ curPrimInfo?.structureName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-block">
              <span class="title">结构交付时间</span>
              <span class="context">{{ curPrimInfo?.endTime }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :justify="'space-between'">
          <el-col :span="8">
            <div class="info-block">
              <span class="title">上次检查时间</span>
              <span class="context">{{ curPrimInfo?.lastReviewTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-block">
              <span class="title">上次维修时间</span>
              <span class="context">{{ curPrimInfo?.lastRepairTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-block">
              <span class="title">健康状态</span>
              <span class="context">{{ curPrimInfo?.status ? "异常" : "正常" }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="theme-two">
      <div class="head-title"><span>仿真基本信息</span></div>
      <div class="info-display">
        <el-row :justify="'space-between'">
          <el-col :span="8">
            <div class="info-block">
              <span class="context">{{ curSimInfo?.numberOfCycles }}</span>
              <span class="title">当前循环次数</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-block">
              <span class="context">{{ curSimInfo?.time }}</span>
              <span class="title">当前时刻</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-block">
              <span class="context">{{ curSimInfo?.crackLength }}</span>
              <span class="title">当前裂纹长度</span>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>

</template>

<script setup lang="ts">
import getDataStore from "@/piniaStore/Data/dataStore.ts";
import {onBeforeMount, onBeforeUnmount, ref} from "vue";
import {T_PrimInfo, T_SimInfo} from "@/assets/dataDemo/type.ts";

let dataStore = getDataStore();
let curPrimInfo = ref<T_PrimInfo | null>(null);
let curSimInfo = ref<T_SimInfo | null>(null);
let updateDataInterval:any = null; // 用于存储定时器引用

// 使用onBeforeMount来初始化数据
onBeforeMount(() => {
  fetchData(); // 初始化加载数据
});

// 定义一个方法用于获取并更新数据
const fetchData = () => {
  curSimInfo.value = dataStore?.flightData.simInfo;
  curPrimInfo.value = dataStore?.flightData.primInfo;
};

// 使用setInterval定期更新数据
onBeforeMount(() => {
  updateDataInterval = setInterval(fetchData, 1000); // 每隔1秒调用fetchData
});

// 清理定时器，避免内存泄漏
onBeforeUnmount(() => {
  if (updateDataInterval) {
    clearInterval(updateDataInterval);
    updateDataInterval = null;
  }
});


</script>

<style scoped lang="scss">
.theme-one {
  margin-top: 35px;
  //background-color: #93efc2;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  flex: 1;

  .head-title {
    //margin-top: 10px;
    font-size: $view-sub-title-fontSize;
    color: $view-sub-title-fontColor;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: #93efc2;
    height: 8%;
  }

  .info-display {
    //background-color: cornflowerblue;
    width: 100%;
    height: 92%;
  }

  .info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;

    .title {
      color: $view-block-title-fontColor;
      font-size: $view-block-title-fontSize;
    }

    .context {
      margin-top: 10px;
      font-size: $view-block-context-fontSize;
      color: $view-block-context-fontColor;
    }
  }
}

.theme-two {
  margin-top: 15px;
  //background-color: #93efc2;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  flex: 1;

  .head-title {
    //margin-top: 10px;
    font-size: $view-sub-title-fontSize;
    color: $view-sub-title-fontColor;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: #93efc2;
    height: 8%;
  }

  .info-display {
    //background-color: cornflowerblue;
    width: 100%;
    height: 92%;
  }

  .info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;

    .context {
      font-size: calc($view-block-title-fontSize + 8px);
      color: $view-block-context-fontColor;
    }

    .title {
      margin-top: 10px;
      font-size: $view-block-context-fontSize;
      color: $view-block-title-fontColor;
    }
  }
}


</style>